<template>
	<view class="ranking" @click="change">
		<view class="ranking_info">
			<rui-icon icon="deep" size="25" color="#9c6600"></rui-icon>
			<text class="ranking_info_name">{{name}}</text>
			<rui-icon icon="deep" size="25" color="#9c6600" custom="transform: rotateY(180deg);"></rui-icon>
			<text class="ranking_info_text">{{text}}</text>
		</view>
		<view class="more">
			<rui-icon icon="arrow-right-fine" color="#9c6600" size="22"></rui-icon>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		text: String,
		name: String
	})
	
	const emits = defineEmits(['change'])
	const change = () => {
		emits('change')
	}
	
	
</script>

<style lang="scss" scoped>
	.ranking {
		background: #ffe2cf;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		color: #9c6600;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 32rpx;
		&_info{
			&_name {
				font-weight: bold;
				font-family: Times New Roman, Times, serif;
			}
		}
		
	}
</style>